import React, { useRef } from 'react';
import { Text } from '@react-three/drei';
import { UltraMaleCharacter3D } from '../UltraMaleCharacter3D';
import { UltraFemaleCharacter3D } from '../UltraFemaleCharacter3D';
import { CommercialCafeEnvironment } from '../CommercialCafeEnvironment';
import type { DatingProfile } from '../../types';
import * as THREE from 'three';

interface CoffeeSceneProps {
  profiles: DatingProfile[];
  onProfileClick: (profile: DatingProfile) => void;
}

export const CoffeeScene: React.FC<CoffeeSceneProps> = ({ profiles, onProfileClick }) => {
  const sceneRef = useRef<THREE.Group>(null);
  const GROUND_LEVEL = 0; // 统一地面高度

  // 移除自动旋转 - 用户反馈场景不应该主动旋转

  // Use 8 profiles for clean distribution
  const coffeeProfiles = profiles.slice(0, 8);

  return (
    <group ref={sceneRef}>
      {/* 商业级室内咖啡厅环境 */}
      <CommercialCafeEnvironment radius={18} />

      {/* 角色定位在室内座位区 - 正确坐在椅子上 */}
      {coffeeProfiles.map((profile, index) => {
        // 精确定义座位位置和朝向
        const seatData = [
          // 卡座位置 - 面向桌子
          { pos: [-10.5, 0.25, -8], rot: [0, Math.PI/2, 0], seated: true },
          { pos: [-10.5, 0.25, 0], rot: [0, Math.PI/2, 0], seated: true },
          { pos: [-10.5, 0.25, 8], rot: [0, Math.PI/2, 0], seated: true },
          { pos: [10.5, 0.25, -8], rot: [0, -Math.PI/2, 0], seated: true },
          { pos: [10.5, 0.25, 0], rot: [0, -Math.PI/2, 0], seated: true },
          { pos: [10.5, 0.25, 8], rot: [0, -Math.PI/2, 0], seated: true },
          
          // 圆桌椅子位置 - 围绕桌子
          { pos: [-6.8, 0.25, -3], rot: [0, Math.PI/4, 0], seated: true },
          { pos: [6.8, 0.25, -3], rot: [0, -Math.PI/4, 0], seated: true }
        ];
        
        const seatInfo = seatData[index] || { pos: [0, 0, 0], rot: [0, 0, 0], seated: false };
        const [x, y, z] = seatInfo.pos;
        
        // 根据角色性别选择超精细模型
        const CharacterComponent = profile.gender === 'male' ? UltraMaleCharacter3D : UltraFemaleCharacter3D;
        
        return (
          <CharacterComponent
            key={profile.id}
            profile={profile}
            position={[x, y, z]}
            rotation={seatInfo.rot}
            onClick={() => onProfileClick(profile)}
            scale={1.0}
            isSeated={seatInfo.seated}
          />
        );
      })}

    </group>
  );
};